<template>
  <scroll-view class="container" scroll-y :show-scrollbar="false" enhanced>
    <!-- 课程内容 -->
    <view class="course">
      <view class="banner">
        <image :src="course.cover" />
      </view>

      <view class="info">
        <view class="price">
          <h3>
            <text>¥ {{ course.price }}</text>
          </h3>
          <view class="buy_count">已有 {{ course.buyCount }} 人购买</view>
        </view>
        <h3 class="name">
          {{ course.title }}
        </h3>
        <view class="tag_list">
          <view class="tag_item" v-if="course.subjectLevelOne">{{
            course.subjectLevelOne
          }}</view>
          <view class="tag_item" v-if="course.subjectLevelTwo">{{
            course.subjectLevelTwo
          }}</view>
        </view>
      </view>

      <!-- 课程卡片 -->
      <view class="course_card">
        <!-- 讲师介绍 -->
        <view class="intro card">
          <view class="title"> 讲师介绍 </view>
          <navigator url="讲师详情" class="teacher_info">
            <view class="avatar">
              <image :src="course.avatar" />
            </view>
            <view class="teacher_desc">
              <view class="teacher_name"
                >高级讲师-{{ course.teacherName }}</view
              >
              <view class="teacher_intro">{{ course.intro }}</view>
            </view>
          </navigator>
          <view class="title"> 课程详情 </view>
          <!-- <view class="course_detail" v-html=''>  -->
          <view
            class="course_detail-wrap"
            :style="{
              height: isShowCourseDetail ? 'auto' : '340rpx',
            }"
          >
            <view class="course_detail" v-html="course.description"> </view>
            <view class="more-icon" @click="showCourseDetail">
              <uni-icons
                :type="isShowCourseDetail ? 'top' : 'bottom'"
                color="#00cc99"
                size="30"
              ></uni-icons>
            </view>
          </view>
        </view>

        <!-- 课程目录 -->
        <view class="catalogue card">
          <view class="title"> 课程目录 </view>
          <view class="catalogue_list">
            <uni-collapse
              ref="collapse"
              v-for="chapter in chapterList"
              :key="chapter.id"
            >
              <uni-collapse-item :title="chapter.title">
                <view
                  class="task_list"
                  v-for="children in chapter.children"
                  :key="children.id"
                >
                  <view class="task_items">
                    <image
                      class="task_type"
                      src="https://cdn-cos-ke.myoed.com/ke_proj/mobilev2/m-core/f1c59a1527e075f6ebfba3d7ac605f07.png"
                    />
                    <view class="task_title">{{ children.title }}</view>
                    <!-- v-show="!state.course.isBuy" -->
                    <image
                      v-show="true"
                      class="task_icon"
                      src="https://cdn-cos-ke.myoed.com/ke_proj/mobilev2/m-core/064fdd1eb99fcb8bef80085f2b548e4b.png"
                    />
                  </view>
                </view>
              </uni-collapse-item>
            </uni-collapse>
          </view>
        </view>

        <!-- 学员评价 -->
        <view class="comment card">
          <view class="title">
            <view class="title_left"> 学员评价（{{ total }}）</view>
            <!-- /pages/course/comment/index?courseId=${courseId}&teacherId=${state.courseDetail.teacherId} -->
            <navigator url="" class="title_right">
              查看全部<uni-icons
                type="right"
                color="#666c80"
                size="12"
              ></uni-icons>
            </navigator>
          </view>

          <!-- 评价列表 -->
          <view class="comment_wrapper">
            <view
              class="comment_list"
              v-for="comment in commentList"
              :key="comment.id"
            >
              <view class="comment_item">
                <view class="logo">
                  <image :src="comment.avatar" />
                </view>
                <view class="content_wrap">
                  <view class="name">{{ comment.nickname }}</view>
                  <veiw class="date">
                    {{ comment.gmtModified }}
                    <uni-rate :touchable="false" :value="5" size="12" />
                  </veiw>
                  <view class="content">{{ comment.content }}</view>
                </view>
              </view>
            </view>
            <navigator :url="`/pages/course/comments/index?courseId=${course.id}&teacherId=${course.teacherId}&courseId=${course.id}`">
              <uni-load-more
                status="more"
                :content-text="{ contentdown: '点击查看更多评论内容' }"
              />
            </navigator>
          </view>
        </view>
      </view>
    </view>
    <!-- 底部购买 -->
    <view class="bottom_tabbar">
      <view class="bottom_wrap">
        <view class="bottom_button">
          <view class="favo_button">
            <view
              :class="['bg', isCollect ? 'active' : '']"
              @click="collectOrUncollect(course.id)"
            ></view>
            {{ isCollect ? "已收藏" : "收藏" }}
          </view>
        </view>
        <view class="bottom_main">
          <view class="buy_button">
            {{ isBuy ? "去学习" : "点击购买" }}
          </view>
        </view>
      </view>
    </view>
  </scroll-view>
</template>
<script lang="ts" setup>
import { onLoad } from "@dcloudio/uni-app";
import {
  reqCollectCourse,
  reqGetCourseDetail,
  reqRemoveCourse,
} from "../../../api/course";
import { reqGetCommentList } from "../../../api/comments";
import { ref } from "vue";
import type {
  ChapterListType,
  CommentsItemsType,
  CourseType,
} from "../../../api/type";
import { useUserStore } from "../../../store/modules/user";
const userStore = useUserStore();

// 定义初始化课程详情数据
const chapterList = ref<ChapterListType>([]);
const course = ref<CourseType>({
  id: "",
  title: "",
  price: 0,
  lessonNum: 0,
  cover: "",
  buyCount: 0,
  viewCount: 0,
  description: "",
  teacherId: "",
  teacherName: "",
  intro: "",
  avatar: "",
  subjectLevelOneId: "",
  subjectLevelOne: "",
  subjectLevelTwoId: "",
  subjectLevelTwo: "",
});
// const id = ref('')
const isBuy = ref(false);
const isCollect = ref(false);
// 获取课程详情
const getCourseDetail = async (id: string) => {
  const res = await reqGetCourseDetail(id);
  // console.log(res);
  chapterList.value = res.chapterList;
  course.value = res.course;
  isBuy.value = res.isBuy;
  isCollect.value = res.isCollect;
};
// 收藏取消收藏
const collectOrUncollect = async (id: string) => {
  const token = userStore.token;
  if (token) {
    // 有token，已登陆
    if (isCollect.value === true) {
      // 已收藏,取消收藏
      reqRemoveCourse(id);
      isCollect.value = false;
      uni.showToast({
        title: "已取消收藏",
      });
    } else {
      // 未收藏，收藏
      reqCollectCourse(id);
      isCollect.value = true;
      uni.showToast({
        title: "已收藏",
      });
    }
  } else {
    // 未登录，提醒登录
    // uni.showToast({
    //   title: "未登录，请登录",
    // });
    uni.showModal({
      title: "提示",
      content: "登陆过期，请重新登陆",
      success: function (res) {
        if (res.confirm) {
          // console.log("用户点击确定");
          uni.navigateTo({
            url: "/pages/login/index",
          });
        } else if (res.cancel) {
          console.log("用户点击取消");
        }
      },
    });
  }
};
onLoad(async (options) => {
  // console.log(options);
  const id = options?.id as string;
  getCourseDetail(id);
  getCommentsList(id);
  // id.value = options.id
});
// 定义初始化是否展开课程详情
const isShowCourseDetail = ref(false);
const showCourseDetail = () => {
  isShowCourseDetail.value = !isShowCourseDetail.value;
};
// 获取评论列表
// 定义初始化评论列表
const commentList = ref<CommentsItemsType>([]);
const total = ref(0);
const getCommentsList = async (id: string) => {
  const res = await reqGetCommentList(1, 5, id);
  // console.log(res);
  commentList.value = res.items;
  total.value = res.total;
};
</script>
<style lang="scss" scoped>
.course {
  background: #f2f3f8;
  padding-bottom: 56px;

  .banner {
    height: 210px;
    width: 100%;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .info {
    border-radius: 0 0 12px 12px;
    padding: 16px;
    margin-bottom: 12px;

    .price {
      display: flex;
      justify-content: space-between;

      h3 {
        color: #ff7b37;
        font-size: 20px;

        text {
          font-size: 12px;
        }
      }

      .buy_count {
        font-size: 12px;
        color: #666c80;
      }
    }

    .name {
      font-size: 18px;
      margin: 8px;
    }

    .tag_list {
      display: flex;

      .tag_item {
        border: 1px solid #666c80;
        color: #666c80;
        display: inline-block;
        padding: 0px 10px;
        font-size: 12px;
        height: 18px;
        border-radius: 16px;
        line-height: 18px;
        margin-right: 8px;
      }
    }
  }

  .tab_wrapper {
    border-radius: 0 0 12px 12px;
  }

  .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    color: #3c464f;
    padding: 16px 0;

    .title_left {
      &::before {
        content: "";
        width: 4px;
        height: 12px;
        border-radius: 10px;
        margin-right: 6px;
        background-color: #2979ff;
      }
    }

    .title_right {
      color: #666c80;
      font-size: 12px;
    }
  }

  .course_detail-wrap {
    position: relative;
    height: 340rpx;
    padding-bottom: 20rpx;
    overflow: hidden;
  }

  .more-icon {
    position: absolute;
    bottom: 0rpx;
    right: 0rpx;
  }

  .course_card {
    display: flex;
    flex-direction: column;
  }

  .card {
    padding: 0 16px;
    background: #fff;
    margin-bottom: 12px;
    flex: 1;
    // min-height: 1000px;
    // height: 100vh;
  }

  .intro {
    .teacher_info {
      display: flex;
      align-items: center;
      border-radius: 12px;
      background: #f5f6fa;
      padding: 12px;

      .avatar {
        width: 36px;
        height: 36px;
        border-radius: 50%;

        image {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }

      .teacher_desc {
        flex: 1;
        overflow: hidden;
        margin-left: 10px;

        .teacher_name {
          font-size: 12px;
          color: #3e414d;
        }

        .teacher_intro {
          word-break: break-all;
          font-size: 12px;
          color: #666c80;
          text-align: left;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          word-wrap: normal;
        }
      }
    }

    .course_detail {
      padding-bottom: 20rpx;
    }
  }

  .comment_list {
    .comment_item {
      display: flex;
      padding: 15px 0;
      border-bottom: 0.07143rem solid #ececec;

      .logo {
        border-radius: 50%;
        width: 32px;
        height: 32px;
        margin-right: 8px;

        image {
          border-radius: 50%;
          height: 100%;
          width: 100%;
        }
      }

      .content_wrap {
        font-size: 12px;
        color: #000;
        flex: 1;

        .date {
          color: #a1a5b2;
          display: flex;
          justify-content: space-between;
          align-items: center;
        }

        .content {
          margin-top: 8px;
        }
      }
    }
  }

  .catalogue {
    .catalogue_list {
      .task_list {
        .task_items {
          display: flex;
          padding: 12px;

          .task_type {
            width: 16px;
            height: 16px;
          }

          .task_title {
            flex: 1;
            font-size: 12px;
            color: #3e414d;
            margin-left: 10px;

            &::after {
              content: "";
              position: absolute;
              bottom: -12px;
              left: 0;
              width: 100%;
              height: 0.07143rem;
              background-color: #c9d0d6;
              transform: scaleY(0.5);
              opacity: 0.5;
            }
          }

          .task_icon {
            width: 16px;
            height: 16px;
          }
        }
      }
    }
  }
}

.bottom_tabbar {
  // background: #fff;
  background: linear-gradient(
    180deg,
    hsla(0, 0%, 86.7%, 0) 0,
    hsla(0, 0%, 86.7%, 0.2) 0.42857rem,
    hsla(0, 0%, 86.7%, 0.2) 0.57143rem,
    #fff 0.64286rem,
    #fff
  );
  padding: 8px 16px 0 16px;
  position: fixed;
  bottom: 0;
  z-index: 100;
  width: 100%;

  .bottom_wrap {
    display: flex;
    width: 100%;
    justify-content: space-between;
  }

  .bottom_button {
    flex: 1;
    padding: 6px 0;

    .favo_button {
      display: flex;
      align-items: center;
      flex-direction: column;
      font-size: 12px;
      color: #8797a1;

      .bg {
        width: 24px;
        height: 24px;
        background-image: url("https://cdn-cos-ke.myoed.com/ke_proj/mobilev2/m-core/0cfab2184a7ac26a164fdc334d40d382.png");
        background-size: 100% 100%;

        &.active {
          background-image: url("https://cdn-cos-ke.myoed.com/ke_proj/mobilev2/m-core/88b416217e2eca5e9e9f1f3fac1e7f24.png");
        }
      }
    }
  }

  .bottom_main {
    flex: 1;
    padding: 6px 0;

    .buy_button {
      width: 90%;
      height: 2.85714rem;
      line-height: 2.85714rem;
      text-align: center;
      color: #fff;
      border: none;
      font-size: 1.14286rem;
      border-radius: 7.14286rem;
      background-color: #ff7a38;
    }
  }
}
</style>
